<template>
  <div>
    <div class="content">
      <div class="top">
        <el-form inline :model="form">
          <el-form-item label="开始时间">
            <el-date-picker
              type="datetime"
              placeholder="选择开始时间"
              v-model="form.startTime"
              size="mini"
              :picker-options="pickerOptions0"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker
              type="datetime"
              placeholder="选择结束时间"
              v-model="form.endTime"
              size="mini"
              :picker-options="pickerOptions0"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="统计时间类型">
            <el-select v-model="form.timeType" size="mini">
              <el-option label="每10分钟" value="10"></el-option>
              <el-option label="每1小时" value="1"></el-option>
              <el-option label="每24小时" value="24"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="getList"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <p class="data" v-show="show">暂无数据</p>
      <div id="SinglePointAnalysis" v-show="shows" style="height: 79vh"></div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import moment from "moment";
import axios from "axios";
import { getInmvDataList } from "../../../../api/Monitoring";
import { time } from "highcharts/highcharts";

const getDate = function (time) {
  let strArr = time.split("-");
  return new Date(strArr[0], strArr[1] - 1, strArr[2]);
};
function fz(num) {
  if (num < 10) {
    num = "0" + num;
  }
  return num;
}
const getYMD = function (time) {
  // 将结果放在数组中，使用数组的join方法返回连接起来的字符串，并给不足两位的天和月十位上补零
  return [time.getFullYear(), fz(time.getMonth() + 1), fz(time.getDate())].join(
    "-"
  );
};
const getDays = function (day1, day2) {
  // 获取入参字符串形式日期的Date型日期
  let startTime = getDate(day1),
    endTime = getDate(day2),
    tempArr = [];
  let y = moment(startTime).year(),
    m = moment(startTime).month(),
    d = moment(startTime).day();
  while (startTime.getTime() !== endTime.getTime()) {
    tempArr.push(getYMD(startTime));
    startTime = new Date(y, m, ++d);
  }
  // 将结束日期的天放进数组
  tempArr.push(getYMD(endTime));
  return tempArr;
};

export default {
  name: "SinglePointAnalysis",
  props: {
    source: {
      type: Object,
      default() {
        return {};
      },
    },
    node: Object,
  },
  data() {
    return {
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now(); //如果没有后面的-8.64e6就是不可以选择今天的
        },
      },
      shows: true,
      form: {
        startTime: moment().subtract(31, "d").format("YYYY-MM-DD 00:00:00 "),
        endTime: moment().add(1, "days").format("YYYY-MM-DD HH:mm:ss "),
        timeType: "1",
      },
      dataArr: [],
      show: false,
      legendName: [],
      xDataArr: [],
      list: [],
    };
  },
  created() {},
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      this.shows = true;
      this.show = false;
      let myCharts = echarts.init(
        document.getElementById("SinglePointAnalysis")
      );
      myCharts.showLoading();
      let queryData = {
        startTime: moment(this.form.startTime).format("YYYY-MM-DD HH:mm:ss"),
        endTime: moment(this.form.endTime).format("YYYY-MM-DD HH:mm:ss"),
        timeType: this.form.timeType,
      };
      const res = await getInmvDataList({
        monitorCode: this.node.monitorCode,
        monitorId: this.node.id,
        endTime: queryData.endTime,
        startTime: queryData.startTime,
        timeType: queryData.timeType,
        // monitorType: this.node.monitorTypeId,
      });
      console.log(res);
      if (res.resultCode == "200") {
        this.shows = true;
        this.show = false;
        let list = res.parameter.list,
          depthList = res.parameter.tunnelDepthList,
          timeArr = [];
        console.log(list);
        for (let i = 0; i < list.length; i++) {
          let items = list[i].dataList;
          timeArr.push(list[i].theDate);
          for (let j = 0; j < items.length; j++) {
            for (let key in items[j])
              key === "theDate"
                ? (items[j][key] = items[j][key].split(" ")[0])
                : null;
            for (let k = 0; k < depthList.length; k++)
              if (items[j].tunnel === depthList[k].tunnel)
                items[j].depth = depthList[k].depth / 1000;
          }
        }
        console.log(timeArr);

        //this.$nextTick(() => {
        let that = this;
        let splitArea = 20;
        let opt = {
          baseOption: {
            timeline: {
              axisType: "category",
              autoPlay: true,
              playInterval: 1000,
              controlStyle: {
                position: "right",
              },
              left: 20,
              right: 20,
              data: timeArr,
              label: {
                formatter: function (s) {
                  return s;
                },
              },
            },
            title: {
              text: this.node.label + "内部位移",
              left: "center",
            },
            legend: {
              show: true,
              top: "5%",
              data: [],
              textStyle: {
                color: "black",
                fontSize: 14,
              },
            },
            calculable: true,
            grid: (function () {
              let gridArray = [];
              let grid = {
                left: "30%",
                top: "20%",
                width: "40%",
                height: "60%",
              };
              gridArray.push(grid);
              return gridArray;
            })(),
            tooltip: {
              trigger: "axis",
              formatter(params) {
                let tip = params[0].marker + params[0].seriesName + "<br/>";
                for (let y = 0; y < params.length; y++) {
                  tip +=
                    "位移" +
                    " : " +
                    params[y].value[0] +
                    " m<br/>" +
                    "深度" +
                    " : " +
                    params[y].value[1] +
                    " mm<br/>"; //+
                  // params[y].value[2] +
                  // "<br/>";
                }
                return tip;
              },
              axisPointer: {
                type: "line",
              },
              // formatter: function (params) {
              //   console.log(params)
              //   if (params[0].data.length > -1) {
              //     return '高度: ' + params[0].data[1] + 'm<br>位移: ' + params[0].data[0] + 'mm';
              //   } else {
              //     return '高度:  m<br>位移:  mm';
              //   }
              // }
            },
            xAxis: (function () {
              let xArr = [];
              let xAxis;
              xAxis = {
                position: "top",
                gridIndex: 0,
                min: -1.1 * splitArea,
                max: 1.1 * splitArea,
                name: "位移(mm)",
                interval: splitArea / 20,
                nameGap: 50,
                nameLocation: "middle",
                axisLabel: {
                  show: true,
                  rotate: -70,
                  formatter: function (value) {
                    for (let i = 0; i < splitArea * 1.1; i++) {
                      if (value % (splitArea / 10) !== 0) {
                        return "  ";
                      }
                    }
                    return value;
                  },
                },
                splitLine: {
                  show: false,
                  boundaryGap: false,
                  color: "blue",
                  type: "value",
                },
                splitArea: {
                  show: true,
                  areaStyle: {
                    opacity: 0.45,
                    color: [
                      "#FE1C23",
                      "#FE1C23",
                      "#FE9C28",
                      "#FE9C28",
                      "#FE9C28",
                      "#FE9C28",
                      "#FE9C28",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#FE9C28",
                      "#FE9C28",
                      "#FE9C28",
                      "#FE9C28",
                      "#FE9C28",
                      "#FE1C23",
                      "#FE1C23",
                    ],
                  },
                }, //保留网格区域
              };
              xArr.push(xAxis);
              return xArr;
            })(),
            yAxis: (function () {
              let yAxisArray = [];
              let yAxis = {
                name: "深度(m)",

                nameTextStyle: {
                  padding: [0, 0, -500, 0],
                },
                gridIndex: 0,
                min: "dataMin",
                //max: 0,
                type: "value",
                scale: true,
                nameLocation: "end",
                nameGap: 10,
                inverse: true,
              };
              yAxisArray.push(yAxis);
              return yAxisArray;
            })(),
          },
          options: [],
        };
        for (let i = 0; i < list.length; i++) {
          let dataOption = { series: [] };
          let sensorList = list[i].dataList;
          dataOption.series.push({
            name: that.node.name,
            type: "line" /*line*/,
            symbolSize: 10,
            lineStyle: {
              normal: {
                width: 2,
              },
              smooth: true,
            },
            smooth: true,
            // xAxisIndex: i,
            // yAxisIndex: i,
            data: (function () {
              let data = [];
              for (let k = 0; k < sensorList.length; k++) {
                data.push([
                  parseFloat(sensorList[k].xdata).toFixed(3),
                  parseFloat(sensorList[k].depth).toFixed(3),
                  // parseFloat(sensorList[k].theDate),
                ]);
              }
              let da = data.reverse();
              return da;
            })(),
            itemStyle: {
              normal: {
                color: "#397B8B", // function(params) {
                //     // build a color map as your need.
                //     let colorList = [
                //         '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                //         '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                //         '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                //     ];
                //     return colorList[params.dataIndex]
                // }
              },
              lineStyle: "pic",
              smooth: true,
            },
          });
          opt.options.push(dataOption);
        }
        myCharts.hideLoading();
        myCharts.clear();
        console.log(opt);
        myCharts.setOption(opt);
        myCharts.resize();
        //})
      } else if (res.resultCode == "204") {
        this.show = true;
        this.shows = false;
        this.$message({
          message: "暂无数据",
          offset: 450,
          duration: 1000,
        });
      }
    },
  },
};
</script>

<style scoped>
.content {
  height: 87vh;
  overflow: auto;
}
.top {
  height: 5vh;
  margin-top: 5px;
  margin-left: 10px;
}
.data {
  text-align: center;
  font-size: 14px;
  margin-top: 20px;
}
</style>
